<template>
	<div class="each_hour shadow">
		<div class="title_bar">
			<p>逐小时天气预报<a>数据来源于中国天气网</a></p>
			<button class="scroll_left" @click="scrollLeft"></button>
			<button class="scroll_right" @click="scrollRight"></button>
		</div>
		<ul class="info_container" ref="info_container">
			<li class="each_info" v-for="(item,index) in hourly" :key="index" >
				<div class="info_title">{{item.hour}}</div>
				<img class="info_icon" v-bind:src= "img_url + item.icon + '.png'"/>
				<div class="info_temp">{{item.temp}}°</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data: function () {
			return {
				hourly: [],
			}
		},
		methods: {
			// 点击左右滑动按钮时，改变left值
			scrollLeft: function() {
				this.$refs.info_container.setAttribute("style","left: 25px;");
			},
			scrollRight: function() {
				this.$refs.info_container.setAttribute("style","left: -1180px;");
			}
		},
		computed: {
			img_url: function () {
				return process.env.BASE_URL + 'WeatherIcon/weather-icon-S1/color-64/'
			},
			city_id() {
				return this.$store.state.cityId;
			}
		},
		watch: {
			// 当city_id改变时请求新数据
			city_id(nowId) {
				let url = 'https://devapi.heweather.net/v7/weather/24h?key=4f1744b1ba5b47ab8b0a893374efa8ca&location=' + nowId;
				this.$axios
					.get(url)
					.then(res => {
						this.hourly = res.data.hourly;
						// this.id = this.$props.city_id;
						let reg = /\d\d:\d\d(?=\+)/;
						for(let i = 0; i <= this.hourly.length-1; i++) {
							this.hourly[i].hour = this.hourly[i].fxTime.match(reg)[0];
						}
					})
			}
		}
	} 
	
</script>

<style lang="less">
	.each_hour {
		position: relative;
		height: 190px;
		// width: 1225px;
		padding: 25px;
		margin-top: 100px;
		// margin-bottom: 0;
		background-color: #fff;
		border-radius: 10px;
		// box-shadow: @shadow;
		overflow: hidden;
		box-sizing: border-box;
		.title_bar {
			position: relative;
			margin-bottom: 16px;
			p {
				font-size: 18px;
				color: #333;
			}
			a {
				line-height: 18px;
				margin-left: 10px;
				font-size: 11px;
				color: #aaa;
			}
			button {
				position: absolute;
				top: 0px;
				width: 24px;
				height: 24px;
				border: none;
				background-color: #fff;
				background-image: url(../../public/sprite.png);
				cursor: pointer;
				outline: none;
			}
			.scroll_left {
				right: 35px;
				background-position: -135px -154px;
			}
			.scroll_left:hover {
				background-position: -160px -154px;
			}
			.scroll_right {
				right: 5px;
				background-position: -190px 0px;
			}
			.scroll_right:hover {
				background-position: -190px -25px;
			}
		}
		.info_container {
			position: absolute;
			left: 25px;
			display: flex;
			width: 2345px;
			justify-content: space-between;
			transition: all 1s ease 0s;
			.each_info {
				// width: 100px;
				text-align: center;
				.info_icon {
					margin: 10px 0;
					width: 36px;
				}
				.info_title {
					font-size: 14px;
					color: #aaa;
				}
				.info_temp {
					font-size: 18px;
				}
			}
		}
	}
</style>
